<template>
    <el-row :gutter="20" class="iconSelector">
        <el-col :span="24">
            <el-form :inline="false" label-width="0">
                <el-form-item label="">
                    <el-input v-model.trim="queryForm.title" @input="queryData"
                              :placeholder="translate('tips.inputKey')"/>
                </el-form-item>
            </el-form>
        </el-col>

        <div class="list-row">
            <el-col v-for="(item, index) in queryIcon" :key="index" :span="6">
                <el-card shadow="hover" @click.native="handleIcon(item)">
                    <vab-icon :icon="item"/>
                </el-card>
                <span :title="item">{{ item }}</span>
            </el-col>
            <p v-if="queryForm.title && searchRes.length===0">
                {{ translate('tips.emptyTips') }}
            </p>
        </div>
        <el-col :span="24">
            <el-pagination
                :background="background"
                :current-page="queryForm.pageNo"
                :layout="layout"
                :page-size="queryForm.pageSize"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
            />
        </el-col>
    </el-row>
</template>

<script lang="ts">
import {Component} from "vue-property-decorator";
import BaseVue from '../../../common/base-vue.vue'
import _ from 'lodash'
import ICON from '../../../icon/remixIcon'

@Component({components: {}})
export default class VabIconSelector extends BaseVue {
    private iconList = ICON.list;
    private searchRes = [];
    private icon = '24-hours-fill';
    private layout = 'total, prev,jumper, next';
    private total = 0;
    private background = true;
    private height = 0;
    private queryIcon: string[] = [];
    private queryForm: object = {
        pageNo: 1,
        pageSize: 16,
        title: '',
    };

    //生命周期created
    private created() {
        this.fetchData();
    };

    private handleSizeChange(val: number) {
        this.queryForm.pageSize = val;
        this.fetchData();
    };

    private handleCurrentChange(val: number) {
        this.queryForm.pageNo = val;
        this.fetchData();
    };

    private queryData(val: string) {
        this.queryForm.pageNo = 1;
        if (val) {
            this.searchRes = this.iconList.filter(item => {
                if (item.indexOf(val) > -1) {
                    return item;
                }
            })
            this.queryIcon = _.cloneDeep(this.searchRes);
        } else {
            this.searchRes = [];
            this.queryIcon = this.iconList;
        }
        this.fetchData();
    };

    private fetchData() {
        let index1 = (this.queryForm.pageNo - 1) * this.queryForm.pageSize;
        let index2 = this.queryForm.pageNo * this.queryForm.pageSize;
        if (this.searchRes.length > 0) {
            this.queryIcon = this.searchRes.slice(index1, index2);
            this.total = this.searchRes.length;
        } else if (this.searchRes.length === 0 && !this.queryForm.title) {
            this.queryIcon = this.iconList.slice(index1, index2);
            this.total = this.iconList.length;
        } else {
            this.queryIcon = [];
            this.total = 0;
        }
    };

    private handleIcon(item: string) {
        this.icon = item;
        this.$emit('select', item);
    };
}
</script>

<style lang="scss" scoped>
.iconSelector {
    margin: 0;

    ::v-deep.el-card__body {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 28px;
        cursor: pointer;

        i {
            font-size: 28px;
            color: $base-font-color-secondary;
            text-align: center;
            vertical-align: middle;
            pointer-events: none;
            cursor: pointer;
        }
    }

    .el-form {
        width: 100%
    }

    .list-row {
        height: 287px;

        .el-col {
            cursor: pointer;
            margin-bottom: 10px;

            .el-card {
                margin: 0;
            }

            span {
                width: 60px;
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: center;
            }
        }

        p {
            text-align: center;
            line-height: 250px;
        }
    }

    .el-pagination {
        margin: 0;

        ::v-deep.el-pagination__jump {
            margin: 0;
        }
    }
}
</style>
